<template>
    <el-container >
      <el-aside style="width:380px; background-color: white">
        <el-calendar v-model="dateValue">
        </el-calendar>
      </el-aside>
      <el-container>
        <el-main>
          <list :queryDateArr="queryDateArr"/>
        </el-main>
      </el-container>
    </el-container>
</template>
<script>
import { parseTime } from '@/utils'
import List from './complex-list-line-edit.vue'

export default {
  name: 'AsideSearchList',
  components: { List },
  data() {
    return {
      dateValue: new Date(),
      queryDateArr: []
    }
  },
  watch: {
    dateValue(nval) {
      const dateStr = parseTime(nval) // 2020-03-24 08:00:00
      const dateStart = dateStr.substr(0, 10)
      const dateEnd = dateStr.substr(0, 10)
      // 子组件接收日期参数，是一个范围，再通过工具类分解成2个查询参数传给后台。 eg: createdate_Start、createdate_End
      this.queryDateArr = [dateStart, dateEnd]
    }
  }
}
</script>
<style>
  /* 调整页面日历高度*/
  .el-calendar-table .el-calendar-day{
    height: 38px;
  }

  .el-calendar__body td {
    text-align: center;
  }
  .is-selected {
    color: red;
  }
</style>
